<template>
    <div class="login-container">
        <div class="logo-on-loginPage">
            <!-- <img src="@/assets/yanyun.png"> -->
            <h2>星耀信息化数据服务监控平台</h2>
        </div>
        <!-- <div class="tips">
            智联世界
        </div> -->
        <div class="tips">
            <img class="tips_img" src="./../../assets/login_update.png" alt="" srcset=""/>
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                <div>
                    <h1>欢迎登录</h1>
                </div>
                <el-form-item class="el-form-item-defind" prop="accountName">
                    <el-input v-model.trim="loginForm.accountName" placeholder="账号" prefix-icon="el-icon-user" size="large"> </el-input>
                    <div class="showRememberAccount" v-show="showAccountsPanel">
                        <RememberAccount @func="getAccountFormSon" ></RememberAccount>
                    </div>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input v-model.trim="loginForm.pwd" placeholder="密码" prefix-icon="el-icon-lock" show-password size="large" @keyup.native.enter="handleLogin"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-checkbox v-model="rememberMe">记住我</el-checkbox>
                </el-form-item>
                
                <el-form-item class="el-form-item-defind" >
                    <el-button type="primary" class="login-btn" @click.prevent = "handleLogin" size="large">登 录</el-button>
                </el-form-item>
                <!-- <div class="link">微信公众号链接
                    <div class="qrcode">
                        <p>扫码登录微信公众号</p>
                        <img src="./../../assets/qrcode.jpg" alt="" srcset="">
                    </div>
                </div> -->
            </el-form>
        </div>
    </div>
</template>
<script>
import {login} from '@/api/user.js'
import { mapActions } from "vuex";
import RememberAccount from '@/components/RememberAccount'
export default {
    components: {RememberAccount },
    name: 'login',
    data(){
        return {
			// 登录请求参数
            loginForm: {
                accountName: '',
                pwd: ''
            },
            loginRules: {
                accountName: [
                    {required: true, message: '请输入用户名', trigger: 'blur'}
                ],
                pwd: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ]
            },

            rememberMe:false,
        }
    },
    methods: {
        ...mapActions("menu", {
            setNickName: "setNickName"
        }),
        getAccountFormSon(data){
            if(data.account.length > 0){
                this.loginForm.accountName = data.account;
                // this.loginForm.pwd = data.password;
            }
        },
        handleLogin(){
            this.$refs.loginForm.validate(valid => {

                // this.$router.push('AdminHome');

                if(valid){       
                    login(this.loginForm).then(res => {                     
                        if(res.data.code == 200){
                            var token = res.data.data.token;
                            var id = res.data.data.id; 
                            localStorage.setItem('token', token);
                            localStorage.setItem('id', id);
                            this.$store.state.id = res.data.data.id;
                            this.$store.commit('menu/setToken', localStorage.getItem('token'));
                            this.$store.commit('menu/setId', res.data.data.id);
                            var nickName = res.data.data.nickName;
                            this.setNickName(nickName);
                            this.$router.push('AdminHome');

                            if(this.rememberMe){
								// setAutoCompleteData 设置自动装配的数据，第一个是数据的 key，
                                this.setAutoCompleteData("loginAccounts", this.loginForm.accountName+'/'+this.loginForm.pwd, 8);
                            }
                        }else if(res.data.code == 400){
                            this.$message.error(res.data.message)
                        }
                    })
                }else{
                    console.log("error login")
                    return;
                }
            })
        }
    },


    computed: {
        formatDateGetOnlyDay(date) {
            return {
                cardState:this.$store.state.menu.cardState,
                dataLevel:this.$store.state.menu.cardDataLevel
            }

        },

        showAccountsPanel: function () {
            let account = this.getAutoCompleteData('loginAccounts');
            if(account!=null && account!=undefined && account.length > 0){
                if(this.loginForm.accountName.length > 0){
                    return false;
                }else{
                    return true;
                }
            }else{
                return false;
            }
        }
    },
}
</script>

<style lang="scss" scoped>
    *{
        box-sizing: border-box;
    }
    /deep/ .el-input__prefix, .el-input__suffix{
        color:#7D7AF0;
    }
    /deep/ .el-button--primary{
        background-color: #7D7AF0;
        border-color: #7D7AF0;
    }
    /deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
        color: #7D7AF0;
    }
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: #7D7AF0;
        border-color: #7D7AF0;
    }
    /deep/ .el-checkbox__inner:hover{
        border-color: #7D7AF0;
    }
    .login-container {
        position: relative;
        height: 100%;
        // background: url('./../../assets/login.jpg');
        // background-size: cover;
        background: #34344B;
        .logo-on-loginPage{
            height: 75px;
            position: absolute;
            // top: 60px;
            top: 38px;
            // left: 80px;
            left: 59px;
            display: flex;

            h2{
                display: inline-block;
                margin-left: 20px;
                line-height: 75px;
                // font-size:32px;
                font-size: 22px;
                color: #fff;
                letter-spacing: 2px;
            }

            img{
                height: 60px;
                margin-top: 8px;
                display: inline-block;
            }
        }

        // .tips{
        //     position: absolute;
        //     top: 350px;
        //     left: 150px;
        //     font-size: 68px;
        //     color: #fff;
        //     letter-spacing: 5px;
        // }
        .tips{
            position: absolute;
            top: 145px;
            left: calc(50% - 642px);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1284px;
            height: 772px;
            background: #fff;
            border-radius: 60px;
            .tips_img{
                width: 653px;
                height: 690px;
            }
        }

        .login-form {
            // position: absolute;
            top: 30%;
            right: 15%;
            width: 400px;
            // height: 380px;
            padding: 50px 50px 0 50px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            // box-shadow: 5px 5px 5px #2d7fd2;

            h1 {
                text-align: center;
                // color: #128bf1;
                color: #3F3F41;
                font-size: 26px;
                letter-spacing: 1px;
                margin-bottom: 45px;
            }
            .login-btn {
                width: 100%;
            }


            .el-form-item-defind{margin-bottom: 38px;}

            .link{
                color:#3B3A54;
                font-size:14px;
                // margin-bottom: 10px;
                position: relative;
            }
            .link:hover{
                cursor: pointer;
                .qrcode{
                    // display: block;
                    opacity: 1;
                }
            }
            .qrcode{
                // transform-origin: center top;
                transition: all .3s ease;
                z-index: 2036;
                // display: none;
                opacity: 0;
                text-align: center;
                position: absolute;
                top: 28px;
                background: #ebeef5;
                min-width: 150px;
                border: 1px solid #ebeef5;
                padding: 12px;
                z-index: 2000;
                color: #606266;
                line-height: 1.4;
                text-align: justify;
                font-size: 14px;
                -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
                word-break: break-all;
                img{
                    width: 120px;
                    height: 120px;
                }
            }
            .qrcode::before{
                content:"";
                position:absolute;
                top:-10px;
                left:calc(50% - 10px);
                border-bottom:10px solid #ebeef5;
                border-left:10px solid transparent;
                border-right:10px solid transparent;
            }
        }


        .el-input__inner {
            background-color: rgba(255, 255, 255, 0.5);
        }

        .showRememberAccount{
            position: absolute;
            box-sizing: border-box;
            width: 100%;
            background: #f7f7f7;
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            z-index: 9;
        }









        @media screen and (max-width: 480px) {
            .logo{
                height: 75px;
                position: absolute;
                top: 20px;
                left: 20px;
                display: block;

                h2{
                    display: block;
                    margin-left: 10px;
                    line-height: 75px;
                    font-size:20px;
                    color: #fff;
                    letter-spacing: 2px;
                }

                img{
                    height: 30px;
                    margin-top: 8px;
                    display: inline-block;
                }
            }

            .tips{
                display:none;
            }

            .login-form {
                position: absolute;
                top: 25%;
                left: 20px;
                width: 250px;
                height: 380px;
                padding: 20px 20px 0 20px;
                background: rgba(255, 255, 255, 0.8);
                border-radius: 10px;
                box-shadow: 5px 5px 5px #2d7fd2;

                h1 {
                    text-align: center;
                    color: #128bf1;
                    font-size: 26px;
                    letter-spacing: 1px;
                    margin-bottom: 45px;
                }
                .login-btn {
                    width: 100%;
                }


                .el-form-item-defind{margin-bottom: 38px;}
            }
        }


    }

</style>

